.profile{
	// height: 100vh;
	padding: 0rpx 32rpx 0rpx 32rpx;
	 box-sizing: border-box;
	 background-color: #f1f2f2;
	 position: relative;
	 .profile-main-container{
		 // height: 418rpx;
		 // border: 1px red solid;
		 position: relative;
		 .user-info-container{
			 width: 100%;
			 margin-top: 54rpx;
			 margin-bottom: 50rpx;
			 display: flex;
			 align-items: center;
			 .user-avatar-container{
				 width:112rpx;
				 height:112rpx;
				 margin-right: 18rpx;
			 }
			 .user-name-container{
				  .user-name{
					  font-family:$global-font-family;
					  font-weight:900;
					  color:#ffffff;
					  font-size:36rpx;
					  position: relative;
					  .user-identity{
						  position: absolute;
						  right:0rpx;
						  top: 50%;
						  height:32rpx ;
						  transform: translate(calc(100% + 16rpx),-50%);
						  font-size: 20rpx;
						  padding: 0rpx 12rpx 0rpx 10rpx;
						  background-color: #ffffff;
						  border-radius: 16rpx 16rpx 4rpx 16rpx;
						  display: flex;
						  align-items: center;
						  font-family: $global-font-family;
						  .icon{
							  font-size: 24rpx;
							  margin-right: 4rpx;
						  }
						  &.agent{
							  color: #188CF1;
						  }
						  &.user{
							  color: #999999;
						  }
						  &.vip{
							  color: #FFB639;
						  }
					  }
				  }
				  .user-phone{
					  font-family:$global-font-family;
					  color:#f2f2f2;
					  font-size:24rpx;
				  }
			 }
		 }
		 .account-balance-container{
			 height:204rpx;
			 background-color:#ffffff;
			 border-radius:24rpx;
			 box-shadow:0rpx 6rpx 14rpx rgba(0, 87, 154, 0.1);
			 display: flex;
			 align-items: center;
			 .account-balance,.freeze-balance{
				 position: relative;
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.balance-count{
					font-family:$global-font-family;
					font-weight:900;
					color:#1370c1;
					font-size:48rpx;
				}
				.balance-label{
					font-family:$global-font-family;
					font-weight:700;
					color:#333333;
					font-size:28rpx;
				}
			 }
			 .account-balance::after{
				 content: " ";
				 position: absolute;
				width:2rpx;
				height:74rpx;
				background-color:#999999;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
			 }
		 }
		 .open-vip-container{
			 width:100%;
			 height:140rpx;
			 background: url(https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8acfaa58-aeb5-4502-8309-365d4c6cca4a/d48adb4f-ca86-465b-ab4d-88138f8c667c.png) no-repeat;
			 background-size: 100% 100%;
			 background-position: 0rpx 0rpx;
			 margin-top: 32rpx;
			 display: flex;
			 align-items: center;
			 justify-content: space-between;
			 .open-vip-left{
				 transform: translateY(10rpx);
				 margin-left: 28rpx;
				 display: flex;
				 .vip-info{
					 margin-left: 10rpx;
					 display: flex;
					 flex-direction: column;
					 .vip-label{
						font-family:$global-font-family;
						 color:#fddbb5;
						 font-size:32rpx;
						 display: flex;
						 .app-name{
							 width: 140rpx;
							 position: relative;
							 font-weight: 800;
							 &::after{
								 position: absolute;
								 right: 0;
								 content:'';
								 width:2rpx;
								 height:20rpx;
								 background-color:#fddbb5;
								 border-radius:2rpx;
								 top: 50%;
								 transform: translateY(-40%);
							 }
						 }
						 .vip-name{
							 margin-left: 10rpx;
							 // width: 128rpx;
							 text-align: right;
							  font-weight: 800;
						 }
					 }
					 .vip-status{
						 font-family:$global-font-family;
						 color:#fddbb5;
						 font-size:20rpx;
						 margin-top: 8rpx;
					 }
				 }
			 }
			 .open-vip-right{
				 margin-right: 14rpx;
				  transform: translateY(10rpx);
				 .open-btn{
					 width:210rpx;
					 height:78rpx;
					 background: url(https://vkceyugu.cdn.bspapp.com/VKCEYUGU-8acfaa58-aeb5-4502-8309-365d4c6cca4a/7b13df2a-9e6e-4d59-87fc-3b35bf7d0324.png) no-repeat;
					 background-size: 100% 100%;
					 background-position: 0rpx 0rpx;
				 }
			 }
		 }
		 .order-list-container{
			 width:100%;
			 background-color:#ffffff;
			 border-radius: 32rpx;
			 height: 244rpx;
			 margin-top: 32rpx;
			 padding: 32rpx 24rpx 32rpx 24rpx;
			 box-sizing: border-box;
			 .title{
				 height: 44rpx;
				 font-size: 32rpx;
				font-family:$global-font-family;
				 font-weight: 800;
				 color: #333333;
				 line-height: 44rpx;
			 }
			 .order-list{
				 width: 100%;
				 display: flex;
				 justify-content: space-around;
				 margin-top: 32rpx;
				 .order-item{
					 width: 96rpx;
					 height: 102rpx;
					 display: flex;
					 align-items: center;
					 justify-content: space-between;
					 flex-direction: column;
					 .order-icon{
						 width: 62rpx;
						 height: 62rpx;
						 box-sizing: border-box;
						 position: relative;
						 .icon{
							 width: 100%;
							 height: 100%;
						 }
					 }
					 .order-name{
						 height: 34rpx;
						 font-size: 24rpx;
						 font-family:$global-font-family;
						 font-weight: 400;
						 color: #333333;
						 line-height: 34rpx;
					 }
				 }
			 }
		 }
		 .cell-list-container{
			 width:100%;
			 // height:426rpx;
			 background-color:#ffffff;
			 border-radius:24rpx;
			 margin-top: 32rpx;
			 padding: 12rpx 24rpx 12rpx 24rpx;
			 .cell-item{
				 display: flex;
				 height: 100rpx;
				 align-items: center;
				 .cell-icon{
					 
					 height: 62rpx;
					 width: 62rpx;
					 box-sizing: border-box;
					 display: flex;
					 align-items: center;
					 justify-content: center;
					 .icon{
						 width: 62rpx;
						 height: 62rpx;
						 font-size: 62rpx;
						 color: #0092e5;
					 }
				 }
				 .cell-right{
					 flex: 1;
					 height: 100%;
					 border-bottom: 1rpx #f4f4f5 solid;
					 display: flex;
					 align-items: center;
					 justify-content: space-between;
					 .cell-name{
						 font-family:$global-font-family;
						 color:#333333;
						 font-size:32rpx;
						 margin-left: 20rpx;
					 }
					 .cell-arrow{
						 color: #cccccc;
					 }
					 // &:last-of-type{
					 // 	border-bottom: none;
					 // }
				 }
			 }
		 }
		 .footer-container{
			 height: 76rpx;
			 margin-top: 56rpx;
			 display: flex;
			 justify-content: space-between;
			 padding: 0rpx 68rpx 0rpx 68rpx;
			 box-sizing: border-box;
			 .service-item{
				 height: 100%;
				 width: 100rpx;
				  display: flex;
				  align-items: center;
				  flex-direction: column;
				  .service-icon{
					  width: 48rpx;
					  height: 48rpx;
					  .icon{
						  font-size: 48rpx;
						  color: #999999;
					  }
				  }
				  .service-name{
					  font-family:$global-font-family;
					  color:#999999;
					  font-size:20rpx;
					  transform: scale(.8);
					  text-align: center;
				  }
			 }
		 }
	 }
}